<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <el-row :gutter="20">
          <el-col :span="4">
            <div class="grid-content_left ep-bg-purple">图标</div>
          </el-col>
          <el-col :span="16">
            <div class="grid-content_center ep-bg-purple">
              <h1>物联网后台管理系统</h1>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content_right ep-bg-purple">
              <el-button type="primary" @click="outLogin">退出登录</el-button>
            </div>
          </el-col>
        </el-row>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-row class="tac">
            <el-col :span="24">
              <el-menu
                active-text-color="#ffd04b"
                background-color="#545c64"
                class="el-menu-vertical-demo"
                :default-active="activeState"
                text-color="#fff"
                popper-effect="light"
                @open="handleOpen"
                @close="handleClose"
                router
              >
                <el-menu-item
                  @click="homeview()"
                  class="homeview1"
                  :class="homeview2"
                >
                  <template #title>
                    <el-icon>
                      <House />
                    </el-icon>
                    <span>首页 </span>
                  </template>
                </el-menu-item>
                <el-sub-menu
                  v-for="(item, index) in routesList"
                  :key="index"
                  :index="item.path"
                >
                  <template #title>
                    <el-icon>
                      <location />
                    </el-icon>
                    <span>{{ item.meta.title }}</span>
                  </template>
                  <el-menu-item
                    v-for="(item1, index1) in item.children"
                    :key="index1"
                    :index="item1.path"
                    :class="homeitem"
                    >{{ item1.meta.title }}</el-menu-item
                  >
                </el-sub-menu>
              </el-menu>
            </el-col>
          </el-row>
        </el-aside>
        <el-main>
          <div v-if="istrue == true"><indexMap></indexMap></div>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { watch, onMounted } from "vue";
import { ref } from "vue";
import { Location, House } from "@element-plus/icons-vue";
import { useRouter, useRoute } from "vue-router";
import indexMap from "./index/indexMap.vue";
// 定义接口数据类型
interface MenuItem {
  meta: {
    title: string;
  };
  children?: MenuItem[];
  path: string;
  menuId: string;
}
let router = useRouter();
let routes = router
  .getRoutes()
  .filter((item) => item.children.length != 0)
  .filter((item) => item.meta.levelHidden == false);

const routesList = ref<MenuItem[]>([]);
routesList.value = routes as unknown as MenuItem[];
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
let handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const outLogin = () => {
  localStorage.removeItem("newtoken");
  router.push("/");
};
let activeState = ref("");
let homeview2 = ref("");
let homeitem = ref("");
const homeview = () => {
  homeview2.value = "homeview2";
  homeitem.value = "";
  activeState.value = "/";
  istrue.value = true;
  router.push("/HomeView");
};
let route = useRoute();
const istrue = ref(false); // 使用 ref 创建响应式变量
onMounted(() => {
  homeview();
});
watch(
  () => route.path, // 监听 route.path 的变化
  (val) => {
    if (val != "/HomeView") {
      istrue.value = false;
      homeview2.value = "";
      homeitem.value = "homeitem";
    }
  }
);
</script>

<style lang="scss" scoped>
.el-header {
  background-color: rgb(49, 152, 170);
  height: 80px;

  .ep-bg-purple {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    color: #fff;
  }
}

.el-aside {
  background-color: #ccc;
  height: calc(100vh - 80px);
  overflow: auto;
  .el-row {
    height: 100% !important;
  }
  .homeview2 {
    background-color: rgb(125, 172, 211) !important;
  }
  .homeitem.is-active {
    background-color: rgb(125, 172, 211) !important;
    color: #fff !important;
  }
  .el-menu {
    height: 100%;
    .el-menu-item {
      --el-menu-level: 2 !important;
    }
    .homeview1 {
      --el-menu-level: 0 !important;
    }
  }
  .el-menu :nth-child(1) ::-webkit-scrollbar-thumb {
    display: none !important;
  }
}
.el-aside::-webkit-scrollbar {
  width: 0; /* 隐藏滚动条 */
  background: transparent; /* 背景色透明 */
}
</style>
